<template>
  <div class="sem">
    <h1>推广资源统计表</h1>
    <!-- 选择日期 -->
    <div class="selectdate">
      <span class="dateTips">选择日期：</span>
      <el-date-picker
        @change="getSemList"
        v-model="selectdate"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="['00:00:00']"
        :picker-options="pickerOptions1"
        :clearable="false"
      ></el-date-picker>
    </div>
    <div class="sem_box">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        show-summary
        :row-class-name="tableRowClassName"
        :default-sort="{order: 'descending'}"
      >
        <el-table-column prop="name" label="推广小组"></el-table-column>
        <el-table-column prop="gsy" label="骨髓炎" sortable></el-table-column>
        <el-table-column prop="lbjh" label="淋巴结核" sortable></el-table-column>
        <el-table-column prop="tnbz" label="糖尿病足" sortable></el-table-column>
        <el-table-column prop="ggths" label="股骨头坏死" sortable></el-table-column>
        <el-table-column prop="pfky" label="皮肤溃疡" sortable></el-table-column>
        <el-table-column prop="rc" label="重症褥疮" sortable></el-table-column>
        <el-table-column prop="gbl" label="骨不连" sortable></el-table-column>
        <el-table-column prop="gjh" label="骨结核" sortable></el-table-column>
        <el-table-column prop="yx" label="有效" sortable></el-table-column>
        <el-table-column prop="bili" label="有效比例" sortable></el-table-column>
        <el-table-column prop="dqz" label="待确诊" sortable></el-table-column>
        <el-table-column prop="zhuyuan" label="住院" sortable></el-table-column>
        <el-table-column prop="taotai" label="淘汰" sortable></el-table-column>
        <el-table-column prop="nayao" label="拿药" sortable></el-table-column>
        <el-table-column prop="sum" label="总数" sortable></el-table-column>
        <el-table-column prop="huafei" label="花费" sortable></el-table-column>
      </el-table>
    </div>
    <!-- ECharts图表测试 -->
    <div id="semChart" :style="{height: '300px', width: '450px'}"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";

export default {
  created () {
    const start = new Date(new Date().setHours(0, 0, 0, 0) - 24 * 3600 * 1000);
    const end = new Date(
      new Date().setHours(23, 59, 59, 59) - 24 * 3600 * 1000
    );
    this.selectdate = [start, end];
  },
  mounted () {
    // 后台获取最新数据
    this.getSemList();
  },
  data () {
    return {
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick (picker) {
              const start = new Date(new Date().toLocaleDateString());
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick (picker) {
              const start = new Date(
                new Date().setHours(0, 0, 0, 0) - 24 * 3600 * 1000
              );
              const end = new Date(
                new Date().setHours(23, 59, 59, 59) - 24 * 3600 * 1000
              );
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      selectdate: "",
      tableData: [],
      msgdata: []
    };
  },
  methods: {
    getSemList () {
      axios.post("api/statistics", {
        $gte: this.base.dateFtt("yyyy-MM-dd hh:mm:ss", this.selectdate[0]),
        $lt: this.base.dateFtt("yyyy-MM-dd hh:mm:ss", this.selectdate[1])
      })
        .then(res => {
          if (res.data.status == 0) {

            var tableData = [
              {
                name: "杨欢",
                gsy: 0,
                ggths: 0,
                gjh: 0,
                gbl: 0,
                lbjh: 0,
                tnbz: 0,
                pfky: 0,
                rc: 0,
                yx: 0,
                dqz: 0,
                bili: 0,
                zhuyuan: 0,
                taotai: 0,
                nayao: 0,
                sum: 0,
                huafei: 0
              },
              {
                name: "张仕",
                gsy: 0,
                ggths: 0,
                gjh: 0,
                gbl: 0,
                lbjh: 0,
                tnbz: 0,
                pfky: 0,
                rc: 0,
                yx: 0,
                dqz: 0,
                bili: 0,
                zhuyuan: 0,
                taotai: 0,
                nayao: 0,
                sum: 0,
                huafei: 0
              },
              {
                name: "张振",
                gsy: 0,
                ggths: 0,
                gjh: 0,
                gbl: 0,
                lbjh: 0,
                tnbz: 0,
                pfky: 0,
                rc: 0,
                yx: 0,
                dqz: 0,
                bili: 0,
                zhuyuan: 0,
                taotai: 0,
                nayao: 0,
                sum: 0,
                huafei: 0
              },
              {
                name: "赵晓燕",
                gsy: 0,
                ggths: 0,
                gjh: 0,
                gbl: 0,
                lbjh: 0,
                tnbz: 0,
                pfky: 0,
                rc: 0,
                yx: 0,
                dqz: 0,
                bili: 0,
                zhuyuan: 0,
                taotai: 0,
                nayao: 0,
                sum: 0,
                huafei: 0
              },
              {
                name: "李成成",
                gsy: 0,
                ggths: 0,
                gjh: 0,
                gbl: 0,
                lbjh: 0,
                tnbz: 0,
                pfky: 0,
                rc: 0,
                yx: 0,
                dqz: 0,
                bili: 0,
                zhuyuan: 0,
                taotai: 0,
                nayao: 0,
                sum: 0,
                huafei: 0
              }
            ];
            //杨欢
            var yh = [];
            // 张仕
            var zs = [];
            // 张振
            var zz = [];
            // 李成成
            var zxy = [];
            // 赵晓燕
            var lcc = [];
            res.data.data.forEach(item => {
              if (/赵晓燕/.test(item.msgsource)) {
                zxy.push(item);
              } else if (/张仕/.test(item.msgsource)) {
                zs.push(item);
              } else if (/张振/.test(item.msgsource)) {
                zz.push(item);
              } else if (/杨欢/.test(item.msgsource)) {
                yh.push(item);
              } else if (/李成成/.test(item.msgsource)) {
                lcc.push(item);
              }
            });

            function bz (name, index) {
              name.forEach(item => {
                // 获取八大病种
                if (/待确诊/.test(item.zhenduan)) {
                  tableData[index].dqz += 1;
                } else if (/骨结核/.test(item.zhenduan)) {
                  tableData[index].gjh += 1;
                } else if (/骨髓炎/.test(item.zhenduan)) {
                  tableData[index].gsy += 1;
                } else if (/骨不连/.test(item.zhenduan)) {
                  tableData[index].gbl += 1;
                } else if (/股骨头坏死/.test(item.zhenduan)) {
                  tableData[index].ggths += 1;
                } else if (/皮肤溃疡/.test(item.zhenduan)) {
                  tableData[index].pfky += 1;
                } else if (/褥疮/.test(item.zhenduan)) {
                  tableData[index].rc += 1;
                } else if (/淋巴结核/.test(item.zhenduan)) {
                  tableData[index].lbjh += 1;
                } else if (/糖尿病足/.test(item.zhenduan)) {
                  tableData[index].tnbz += 1;
                }
                // 查看住院人数
                if (item.doctor != "待定") {
                  tableData[index].zhuyuan += 1;
                }
              });
            }
            bz(yh, 0);
            bz(zs, 1);
            bz(zz, 2);
            bz(zxy, 3);
            bz(lcc, 4);
            tableData[0].sum = yh.length;
            tableData[1].sum = zs.length;
            tableData[2].sum = zz.length;
            tableData[3].sum = zxy.length;
            tableData[4].sum = lcc.length;
            // 计算百分比
            tableData[0].bili = isNaN(tableData[0].dqz / tableData[0].sum)
              ? 0
              : `${String(
                100 - (tableData[0].dqz / tableData[0].sum) * 100
              ).slice(".", 4)}%`;
            tableData[1].bili = isNaN(tableData[1].dqz / tableData[1].sum)
              ? 0
              : `${String(
                100 - (tableData[1].dqz / tableData[1].sum) * 100
              ).slice(".", 4)}%`;
            tableData[2].bili = isNaN(tableData[2].dqz / tableData[2].sum)
              ? 0
              : `${String(
                100 - (tableData[2].dqz / tableData[2].sum) * 100
              ).slice(".", 4)}%`;
            tableData[3].bili = isNaN(tableData[3].dqz / tableData[3].sum)
              ? 0
              : `${String(
                100 - (tableData[3].dqz / tableData[3].sum) * 100
              ).slice(".", 4)}%`;
            tableData[4].bili = isNaN(tableData[4].dqz / tableData[4].sum)
              ? 0
              : `${String(
                100 - (tableData[4].dqz / tableData[4].sum) * 100
              ).slice(".", 4)}%`;
            // 赋值数据
            this.tableData = tableData;
            // 图表
            this.msgdata = [];
            // 获取推广来源信息
            let semSource = [];
            res.data.data.forEach(item => {
              if (/网站推广/.test(item.msgsource)) {
                semSource.push({ msgsource: item.msgsource.split("/")[1] });
              }
            });
            // 格式化数据
            this.base.charts(semSource, "msgsource", this.msgdata);
            // echarts 图表执行
            this.base.drawLine(
              "semChart",
              "推广资源统计",
              this.msgdata,
              echarts
            );
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    }
  }
};
</script>
<style lang='stylus' scoped>
.selectdate {
  font-size: 16px;
  margin-bottom: 20px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

#semChart {
  margin-top: 20px;
}
</style>
